<template>
  <div class="plot" @click="nextPage">
    <transition name="plot-fade" v-on:after-enter="afterEnter" v-on:after-leave="afterLeave">
      <div v-if="plotPageShow" v-html="plotPageContent" class="plot-content"></div>
    </transition>
    <div class="tip" v-if="plotPagetipShow">点击任意位置继续</div>
  </div>
</template>

<script>
import Plot from '@/game/data/plot'

export default {
  name: 'Plot',

  data() {
    return {
      plotId: '',
      plotPageCount: 0,
      plotPageContentArray: [],
      plotPageContent: '',
      plotPageCurrent: 0,
      plotPageShow: false,
      plotPageNextAllow: false,
      plotPagetipShow: false,
      plotPagetipShowClock: 0,
    }
  },

  mounted() {
    this.plotId = this.$game.data.state.polt.name
    this.plotPageContentArray = Plot[this.plotId].content
    this.plotPageCount = this.plotPageContentArray.length
    this.plotPageContent = this.plotPageContentArray[0]
    this.plotPageShow = true
    this.plotEndFlag = false
  },

  methods: {
    nextPage() {
      if (!this.plotPageNextAllow)
        return

      if (this.plotPageCurrent < (this.plotPageCount - 1)) {
        this.plotPageNextAllow = false
        this.plotPagetipShow = false
        this.plotPageCurrent = this.plotPageCurrent + 1
        this.plotPageContent = this.plotPageContentArray[this.plotPageCurrent]
        this.plotPageShow = false
      }
      else {
        this.plotPageNextAllow = false
        this.plotPagetipShow = false
        this.plotPageShow = false
        this.plotEndFlag = true
      }
    },
    afterEnter() {
      this.plotPageNextAllow = true
      clearTimeout(this.plotPagetipShowClock)
      this.plotPagetipShowClock = setTimeout(() => { this.plotPagetipShow = true }, 1000)
    },
    afterLeave() {
      if (this.plotEndFlag) {
        this.$game.data.state.scene = 'home'
        return
      }
      this.plotPageShow = true
    },
  }
}
</script>

<style lang="scss">

</style>
